/**
 * SVG地形风速监测站点分布图
 * 使用SVG绘制高质量的地形图和站点分布
 */

// 创建SVG地图
function createSVGMap(container, data) {
    // 检查容器是否存在
    if (!container) {
        console.error('找不到地图容器元素!');
        return;
    }

    // 清空容器内容
    container.innerHTML = '';

    // 设置站点基础数据
    const stationData = data || {
        'A': { id: 'A', name: '站点A', location: '北部山区', status: 'online', windSpeed: 5.2 },
        'B': { id: 'B', name: '站点B', location: '南部平原', status: 'online', windSpeed: 1.3 },
        'C': { id: 'C', name: '站点C', location: '东部海岸', status: 'warning', windSpeed: 6.7 },
        'D': { id: 'D', name: '站点D', location: '西部沙漠', status: 'offline', windSpeed: 0.4 }
    };

    // 站点位置坐标
    const stationPositions = {
        'A': { x: 320, y: 150, elevation: 60 },  // 北部山区
        'B': { x: 560, y: 340, elevation: 10 },  // 南部平原
        'C': { x: 650, y: 380, elevation: 5 },   // 东部海岸
        'D': { x: 180, y: 320, elevation: 20 }   // 西部沙漠
    };

    // 创建SVG元素
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', '100%');
    svg.setAttribute('height', '100%');
    svg.setAttribute('viewBox', '0 0 800 500');
    svg.setAttribute('class', 'svg-map');
    svg.innerHTML = `
        <defs>
            <!-- 渐变定义 -->
            <linearGradient id="mapBackground" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#1a365d" />
                <stop offset="70%" stop-color="#0f2346" />
                <stop offset="100%" stop-color="#0a192f" />
            </linearGradient>
            
            <!-- 山区渐变 -->
            <linearGradient id="mountainGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#4B5563" />
                <stop offset="100%" stop-color="#1F2937" />
            </linearGradient>
            
            <!-- 沙漠渐变 -->
            <linearGradient id="desertGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#D69E2E" />
                <stop offset="100%" stop-color="#F6E05E" />
            </linearGradient>
            
            <!-- 平原渐变 -->
            <linearGradient id="plainGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#2F855A" />
                <stop offset="100%" stop-color="#276749" />
            </linearGradient>
            
            <!-- 海岸渐变 -->
            <linearGradient id="coastGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#4299E1" />
                <stop offset="100%" stop-color="#2B6CB0" />
            </linearGradient>
            
            <!-- 站点状态渐变 -->
            <linearGradient id="onlineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#10B981" />
                <stop offset="100%" stop-color="#059669" />
            </linearGradient>
            
            <linearGradient id="warningGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#F59E0B" />
                <stop offset="100%" stop-color="#D97706" />
            </linearGradient>
            
            <linearGradient id="offlineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#EF4444" />
                <stop offset="100%" stop-color="#B91C1C" />
            </linearGradient>
            
            <!-- 网格图案 -->
            <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
                <path d="M 50 0 L 0 0 0 50" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/>
            </pattern>
            
            <!-- 连接线动画 -->
            <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur stdDeviation="2" result="blur" />
                <feComposite in="SourceGraphic" in2="blur" operator="over" />
            </filter>
            
            <!-- 站点阴影 -->
            <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
                <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="rgba(0,0,0,0.3)" />
            </filter>
            
            <!-- 山脉 -->
            <symbol id="mountain" viewBox="0 0 100 100">
                <path d="M50,10 L90,90 L10,90 Z" fill="url(#mountainGradient)" />
            </symbol>
            
            <!-- 流动数据动画 -->
            <linearGradient id="dataFlow" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="rgba(59, 130, 246, 0)">
                    <animate attributeName="offset" values="0;1" dur="3s" repeatCount="indefinite" />
                </stop>
                <stop offset="20%" stop-color="rgba(59, 130, 246, 0.8)">
                    <animate attributeName="offset" values="0.2;1.2" dur="3s" repeatCount="indefinite" />
                </stop>
                <stop offset="40%" stop-color="rgba(59, 130, 246, 0)">
                    <animate attributeName="offset" values="0.4;1.4" dur="3s" repeatCount="indefinite" />
                </stop>
            </linearGradient>
        </defs>
        
        <!-- 背景 -->
        <rect width="100%" height="100%" fill="url(#mapBackground)" />
        
        <!-- 网格背景 -->
        <rect width="100%" height="100%" fill="url(#grid)" />
        
        <!-- 地形区域 -->
        <g class="terrain-features">
            <!-- 北部山区 -->
            <g class="mountain-area" transform="translate(220, 80)">
                <use href="#mountain" width="120" height="120" x="20" y="0" />
                <use href="#mountain" width="80" height="80" x="100" y="20" />
                <use href="#mountain" width="100" height="100" x="-30" y="10" />
                <text x="80" y="140" fill="rgba(255,255,255,0.7)" font-size="14" text-anchor="middle">北部山区</text>
            </g>
            
            <!-- 西部沙漠 -->
            <g class="desert-area">
                <ellipse cx="180" cy="320" rx="140" ry="100" fill="url(#desertGradient)" fill-opacity="0.6" />
                <text x="180" y="320" fill="rgba(255,255,255,0.7)" font-size="14" text-anchor="middle">西部沙漠</text>
            </g>
            
            <!-- 南部平原 -->
            <g class="plain-area">
                <ellipse cx="520" cy="360" rx="150" ry="80" fill="url(#plainGradient)" fill-opacity="0.5" />
                <text x="520" y="360" fill="rgba(255,255,255,0.7)" font-size="14" text-anchor="middle">南部平原</text>
            </g>
            
            <!-- 东部海岸 -->
            <g class="coast-area">
                <path d="M620,320 Q700,280 720,380 Q650,450 600,420 Z" fill="url(#coastGradient)" fill-opacity="0.7" />
                <path d="M650,350 Q690,330 700,370 Q670,400 650,390 Z" fill="url(#coastGradient)" fill-opacity="0.9">
                    <animate attributeName="d" values="M650,350 Q690,330 700,370 Q670,400 650,390 Z; 
                                                     M650,345 Q690,325 700,365 Q670,395 650,385 Z;
                                                     M650,350 Q690,330 700,370 Q670,400 650,390 Z" 
                            dur="5s" repeatCount="indefinite" />
                </path>
                <text x="660" y="360" fill="rgba(255,255,255,0.7)" font-size="14" text-anchor="middle">东部海岸</text>
            </g>
        </g>
        
        <!-- 站点连接线 -->
        <g class="connection-lines" filter="url(#glow)"></g>
        
        <!-- 站点标记 -->
        <g class="station-markers"></g>
        
        <!-- 数据标签 -->
        <g class="data-labels"></g>
        
        <!-- 标题 -->
        <text x="400" y="40" font-size="20" fill="white" text-anchor="middle" font-weight="bold" filter="url(#shadow)">
            风速监测站点分布
            <tspan x="400" dy="20" font-size="12" fill-opacity="0.7">SVG地形图</tspan>
        </text>
    `;
    
    // 向容器添加SVG
    container.appendChild(svg);
    
    // 获取站点连接线组和站点标记组
    const connectionLinesGroup = svg.querySelector('.connection-lines');
    const stationMarkersGroup = svg.querySelector('.station-markers');
    const dataLabelsGroup = svg.querySelector('.data-labels');
    
    // 绘制站点之间的连接线
    Object.keys(stationPositions).forEach(id => {
        Object.keys(stationPositions).forEach(targetId => {
            if (targetId !== id) {
                const { x: x1, y: y1, elevation: z1 } = stationPositions[id];
                const { x: x2, y: y2, elevation: z2 } = stationPositions[targetId];
                
                // 创建连接线
                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                line.setAttribute('x1', x1);
                line.setAttribute('y1', y1);
                line.setAttribute('x2', x2);
                line.setAttribute('y2', y2);
                line.setAttribute('stroke', 'url(#dataFlow)');
                line.setAttribute('stroke-width', '2');
                line.setAttribute('stroke-opacity', '0.6');
                
                // 添加到连接线组
                connectionLinesGroup.appendChild(line);
            }
        });
    });
    
    // 绘制站点标记
    Object.keys(stationData).forEach(id => {
        const station = stationData[id];
        const { x, y, elevation } = stationPositions[id];
        
        // 确定站点状态颜色
        let statusGradient;
        if (station.status === 'online') {
            statusGradient = 'url(#onlineGradient)';
        } else if (station.status === 'warning') {
            statusGradient = 'url(#warningGradient)';
        } else {
            statusGradient = 'url(#offlineGradient)';
        }
        
        // 创建站点标记组
        const stationGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        stationGroup.setAttribute('class', `station-marker station-${id}`);
        stationGroup.setAttribute('transform', `translate(${x}, ${y})`);
        stationGroup.setAttribute('cursor', 'pointer');
        
        // 站点圆圈
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('r', '20');
        circle.setAttribute('fill', statusGradient);
        circle.setAttribute('stroke', 'white');
        circle.setAttribute('stroke-width', '2');
        circle.setAttribute('filter', 'url(#shadow)');
        
        // 添加悬浮动画
        const animateY = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
        animateY.setAttribute('attributeName', 'cy');
        animateY.setAttribute('values', `0;-${elevation/10};0`);
        animateY.setAttribute('dur', '3s');
        animateY.setAttribute('repeatCount', 'indefinite');
        circle.appendChild(animateY);
        
        // 脉冲动画环
        const pulseCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        pulseCircle.setAttribute('r', '20');
        pulseCircle.setAttribute('fill', 'none');
        pulseCircle.setAttribute('stroke', statusGradient);
        pulseCircle.setAttribute('stroke-width', '1');
        
        const animateR = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
        animateR.setAttribute('attributeName', 'r');
        animateR.setAttribute('values', '20;30;20');
        animateR.setAttribute('dur', '2s');
        animateR.setAttribute('repeatCount', 'indefinite');
        pulseCircle.appendChild(animateR);
        
        const animateOpacity = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
        animateOpacity.setAttribute('attributeName', 'stroke-opacity');
        animateOpacity.setAttribute('values', '0.8;0;0.8');
        animateOpacity.setAttribute('dur', '2s');
        animateOpacity.setAttribute('repeatCount', 'indefinite');
        pulseCircle.appendChild(animateOpacity);
        
        // 站点标识文字
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('text-anchor', 'middle');
        text.setAttribute('dominant-baseline', 'middle');
        text.setAttribute('fill', 'white');
        text.setAttribute('font-weight', 'bold');
        text.setAttribute('font-size', '16');
        text.textContent = id;
        
        // 站点详细信息
        const stationInfo = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        stationInfo.setAttribute('class', 'station-info');
        stationInfo.setAttribute('opacity', '0');
        stationInfo.setAttribute('transform', 'translate(0, 35)');
        
        // 信息背景
        const infoBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        infoBg.setAttribute('x', '-80');
        infoBg.setAttribute('y', '0');
        infoBg.setAttribute('width', '160');
        infoBg.setAttribute('height', '75');
        infoBg.setAttribute('rx', '5');
        infoBg.setAttribute('fill', 'rgba(15, 23, 42, 0.9)');
        infoBg.setAttribute('stroke', 'rgba(255, 255, 255, 0.1)');
        infoBg.setAttribute('stroke-width', '1');
        
        // 站点名称
        const nameText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        nameText.setAttribute('text-anchor', 'middle');
        nameText.setAttribute('fill', 'white');
        nameText.setAttribute('font-size', '14');
        nameText.setAttribute('y', '20');
        nameText.textContent = station.name;
        
        // 站点位置
        const locationText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        locationText.setAttribute('text-anchor', 'middle');
        locationText.setAttribute('fill', 'rgba(255, 255, 255, 0.7)');
        locationText.setAttribute('font-size', '12');
        locationText.setAttribute('y', '40');
        locationText.textContent = `位置: ${station.location}`;
        
        // 风速信息
        const windText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        windText.setAttribute('text-anchor', 'middle');
        windText.setAttribute('fill', 'rgba(255, 255, 255, 0.7)');
        windText.setAttribute('font-size', '12');
        windText.setAttribute('y', '60');
        windText.textContent = `风速: ${station.windSpeed} m/s`;
        
        // 组合信息元素
        stationInfo.appendChild(infoBg);
        stationInfo.appendChild(nameText);
        stationInfo.appendChild(locationText);
        stationInfo.appendChild(windText);
        
        // 组合站点元素
        stationGroup.appendChild(pulseCircle);
        stationGroup.appendChild(circle);
        stationGroup.appendChild(text);
        stationGroup.appendChild(stationInfo);
        
        // 悬停交互
        stationGroup.addEventListener('mouseenter', () => {
            circle.setAttribute('r', '22');
            stationInfo.setAttribute('opacity', '1');
        });
        
        stationGroup.addEventListener('mouseleave', () => {
            circle.setAttribute('r', '20');
            stationInfo.setAttribute('opacity', '0');
        });
        
        // 点击导航到站点详情
        stationGroup.addEventListener('click', () => {
            window.location.href = `station.html?id=${id}`;
        });
        
        // 添加到站点标记组
        stationMarkersGroup.appendChild(stationGroup);
        
        // 创建风速数据标签
        const dataLabel = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        dataLabel.setAttribute('class', `data-label data-label-${id}`);
        dataLabel.setAttribute('transform', `translate(${x + (Math.random() * 40 - 20)}, ${y - 35})`);
        
        // 标签背景
        const labelBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        labelBg.setAttribute('x', '-30');
        labelBg.setAttribute('y', '-15');
        labelBg.setAttribute('width', '60');
        labelBg.setAttribute('height', '25');
        labelBg.setAttribute('rx', '4');
        labelBg.setAttribute('fill', 'rgba(15, 23, 42, 0.9)');
        labelBg.setAttribute('stroke', 'rgba(255, 255, 255, 0.1)');
        labelBg.setAttribute('stroke-width', '1');
        
        // 风速文本
        const windLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        windLabel.setAttribute('text-anchor', 'middle');
        windLabel.setAttribute('dominant-baseline', 'middle');
        windLabel.setAttribute('fill', 'white');
        windLabel.setAttribute('font-size', '12');
        windLabel.textContent = `${station.windSpeed} m/s`;
        
        // 悬浮动画
        const labelAnimateY = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
        labelAnimateY.setAttribute('attributeName', 'transform');
        labelAnimateY.setAttribute('type', 'translate');
        labelAnimateY.setAttribute('additive', 'sum');
        labelAnimateY.setAttribute('values', `0,0; 0,-5; 0,0`);
        labelAnimateY.setAttribute('dur', '5s');
        labelAnimateY.setAttribute('repeatCount', 'indefinite');
        dataLabel.appendChild(labelAnimateY);
        
        // 组合标签元素
        dataLabel.appendChild(labelBg);
        dataLabel.appendChild(windLabel);
        
        // 添加到数据标签组
        dataLabelsGroup.appendChild(dataLabel);
    });
    
    // 添加图例
    const legend = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    legend.setAttribute('class', 'map-legend');
    legend.setAttribute('transform', 'translate(50, 400)');
    
    const legendBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    legendBg.setAttribute('x', '0');
    legendBg.setAttribute('y', '0');
    legendBg.setAttribute('width', '150');
    legendBg.setAttribute('height', '170');
    legendBg.setAttribute('rx', '8');
    legendBg.setAttribute('fill', 'rgba(15, 23, 42, 0.8)');
    legendBg.setAttribute('stroke', 'rgba(255, 255, 255, 0.1)');
    legendBg.setAttribute('stroke-width', '1');
    
    legend.appendChild(legendBg);
    
    // 图例标题
    const legendTitle = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    legendTitle.setAttribute('x', '75');
    legendTitle.setAttribute('y', '20');
    legendTitle.setAttribute('text-anchor', 'middle');
    legendTitle.setAttribute('fill', 'white');
    legendTitle.setAttribute('font-size', '12');
    legendTitle.setAttribute('font-weight', 'bold');
    legendTitle.textContent = '站点状态';
    
    legend.appendChild(legendTitle);
    
    // 图例项
    const legendItems = [
        { color: 'url(#onlineGradient)', label: '在线', y: 45 },
        { color: 'url(#warningGradient)', label: '警告', y: 70 },
        { color: 'url(#offlineGradient)', label: '离线', y: 95 }
    ];
    
    legendItems.forEach(item => {
        const itemGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        itemGroup.setAttribute('transform', `translate(15, ${item.y})`);
        
        const itemCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        itemCircle.setAttribute('r', '6');
        itemCircle.setAttribute('fill', item.color);
        
        const itemText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        itemText.setAttribute('x', '15');
        itemText.setAttribute('y', '0');
        itemText.setAttribute('dominant-baseline', 'middle');
        itemText.setAttribute('fill', 'white');
        itemText.setAttribute('font-size', '12');
        itemText.textContent = item.label;
        
        itemGroup.appendChild(itemCircle);
        itemGroup.appendChild(itemText);
        legend.appendChild(itemGroup);
    });
    
    // 地形图例
    const terrainTitle = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    terrainTitle.setAttribute('x', '75');
    terrainTitle.setAttribute('y', '125');
    terrainTitle.setAttribute('text-anchor', 'middle');
    terrainTitle.setAttribute('fill', 'white');
    terrainTitle.setAttribute('font-size', '12');
    terrainTitle.setAttribute('font-weight', 'bold');
    terrainTitle.textContent = '地形分布';
    
    legend.appendChild(terrainTitle);
    
    // 分隔线
    const divider = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    divider.setAttribute('x1', '15');
    divider.setAttribute('y1', '110');
    divider.setAttribute('x2', '135');
    divider.setAttribute('y2', '110');
    divider.setAttribute('stroke', 'rgba(255, 255, 255, 0.1)');
    divider.setAttribute('stroke-width', '1');
    
    legend.appendChild(divider);
    
    // 地形项
    const terrainItems = [
        { color: 'url(#mountainGradient)', label: '山区', y: 145 },
        { color: 'url(#plainGradient)', label: '平原', y: 165 },
        { color: 'url(#coastGradient)', label: '海岸', y: 185 },
        { color: 'url(#desertGradient)', label: '沙漠', y: 205 }
    ];
    
    terrainItems.forEach(item => {
        const itemGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        itemGroup.setAttribute('transform', `translate(15, ${item.y})`);
        
        const itemCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        itemCircle.setAttribute('r', '6');
        itemCircle.setAttribute('fill', item.color);
        
        const itemText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        itemText.setAttribute('x', '15');
        itemText.setAttribute('y', '0');
        itemText.setAttribute('dominant-baseline', 'middle');
        itemText.setAttribute('fill', 'white');
        itemText.setAttribute('font-size', '12');
        itemText.textContent = item.label;
        
        itemGroup.appendChild(itemCircle);
        itemGroup.appendChild(itemText);
        legend.appendChild(itemGroup);
        
        // 调整图例背景高度
        legendBg.setAttribute('height', '220');
    });
    
    svg.appendChild(legend);
    
    // 添加视角控制按钮
    const controls = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    controls.setAttribute('class', 'view-controls');
    controls.setAttribute('transform', 'translate(740, 450)');
    
    const controlsBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    controlsBg.setAttribute('x', '-70');
    controlsBg.setAttribute('y', '-25');
    controlsBg.setAttribute('width', '80');
    controlsBg.setAttribute('height', '30');
    controlsBg.setAttribute('rx', '15');
    controlsBg.setAttribute('fill', 'rgba(15, 23, 42, 0.8)');
    controlsBg.setAttribute('stroke', 'rgba(255, 255, 255, 0.1)');
    
    controls.appendChild(controlsBg);
    
    // 切换按钮
    const switchBtn = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    switchBtn.setAttribute('class', 'switch-btn');
    switchBtn.setAttribute('cursor', 'pointer');
    switchBtn.setAttribute('transform', 'translate(-45, -10)');
    
    const switchCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    switchCircle.setAttribute('r', '10');
    switchCircle.setAttribute('fill', '#3B82F6');
    
    const switchIcon = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    switchIcon.setAttribute('text-anchor', 'middle');
    switchIcon.setAttribute('dominant-baseline', 'middle');
    switchIcon.setAttribute('fill', 'white');
    switchIcon.setAttribute('font-size', '10');
    switchIcon.textContent = '3D';
    
    switchBtn.appendChild(switchCircle);
    switchBtn.appendChild(switchIcon);
    
    switchBtn.addEventListener('click', function() {
        alert('切换到3D视图');
    });
    
    controls.appendChild(switchBtn);
    
    // 中国地图按钮
    const chinaBtn = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    chinaBtn.setAttribute('class', 'china-btn');
    chinaBtn.setAttribute('cursor', 'pointer');
    chinaBtn.setAttribute('transform', 'translate(-15, -10)');
    
    const chinaCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    chinaCircle.setAttribute('r', '10');
    chinaCircle.setAttribute('fill', 'rgba(255, 255, 255, 0.1)');
    
    const chinaIcon = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    chinaIcon.setAttribute('text-anchor', 'middle');
    chinaIcon.setAttribute('dominant-baseline', 'middle');
    chinaIcon.setAttribute('fill', 'white');
    chinaIcon.setAttribute('font-size', '10');
    chinaIcon.textContent = '中';
    
    chinaBtn.appendChild(chinaCircle);
    chinaBtn.appendChild(chinaIcon);
    
    chinaBtn.addEventListener('click', function() {
        alert('切换到中国地图');
    });
    
    controls.appendChild(chinaBtn);
    
    // 平面地图按钮
    const flatBtn = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    flatBtn.setAttribute('class', 'flat-btn');
    flatBtn.setAttribute('cursor', 'pointer');
    flatBtn.setAttribute('transform', 'translate(15, -10)');
    
    const flatCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    flatCircle.setAttribute('r', '10');
    flatCircle.setAttribute('fill', 'rgba(255, 255, 255, 0.1)');
    
    const flatIcon = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    flatIcon.setAttribute('text-anchor', 'middle');
    flatIcon.setAttribute('dominant-baseline', 'middle');
    flatIcon.setAttribute('fill', 'white');
    flatIcon.setAttribute('font-size', '10');
    flatIcon.textContent = '2D';
    
    flatBtn.appendChild(flatCircle);
    flatBtn.appendChild(flatIcon);
    
    flatBtn.addEventListener('click', function() {
        alert('切换到平面地图');
    });
    
    controls.appendChild(flatBtn);
    
    svg.appendChild(controls);
    
    return svg;
}

// 导出函数
if (typeof module !== 'undefined' && module.exports) {
    module.exports = { createSVGMap };
} else {
    window.createSVGMap = createSVGMap;
} 